<!-- 个人中心的详情 -->
<template>
  <div class="context_box_f">
    <div class="selfInfo_in sbFlex">
      <div class="selfInfo_in_l">头像</div>
      <div class="selfInfo_in_r">
        <imgUpdate @on-success="beforeRead">
          <div class="selfInfo_in_r_img img cenFlex">
            <img :src="userInfo.avatarUrl" alt />
          </div>
        </imgUpdate>
      </div>
    </div>
    <div class="selfInfo_in sbFlex">
      <div class="selfInfo_in_l">名称</div>
      <div class="selfInfo_in_r">{{ userInfo.username }}</div>
    </div>
    <div class="selfInfo_in sbFlex">
      <div class="selfInfo_in_l">联系方式</div>
      <div class="selfInfo_in_r">{{ userInfo.phone }}</div>
    </div>
    <div
      class="selfInfo_in cenFlex"
      style="margin-top: 15px"
      @click="signOutBtn"
    >
      退出登录
    </div>
  </div>
</template>

<script>
import api from "@/api/user";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    imgUpdate: (resolve) => require(["@/components/imgUpdate.vue"], resolve),
  },
  data() {
    //这里存放数据
    return {
      imgUrl: "",
      userInfo: {},
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    beforeRead(file) {
      api
        .updateImg({
          avatarUrl: file[0].file,
        })
        .then((res) => {
          this.userInfo.avatarUrl = file[0].file;
        });
    },
    //   初始获取个人的基本信息
    getuserInfoFn() {
      api.indexUser().then((res) => {
        if (res.code == 0) {
          this.userInfo = res.data || {};
          localStorage.setItem("nice-user", JSON.stringify(res.data));
        }
      });
    },
    // 点击退出
    signOutBtn() {
      localStorage.removeItem("nice_phone");
      this.$nextTick(() => {
        this.$router.replace("/nice-login");
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getuserInfoFn();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
.selfInfo_in {
  margin-top: 2px;
  height: 63px;
  padding: 0px 27px 0px 16px;
  background: #fff;
  .selfInfo_in_r_img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: #f5f5f5;
  }
}
</style>